<template>
	<view class="content">
		<view style="margin-top: 20px;">
			<view class="flex">
				<view style="width: 100%;">
					列数：{{column}}
				</view>
			</view>
			<view class="flex">
				<button style="width: 50px;" @click="column = 1">1</button>
				<button style="width: 50px;" @click="column = 2">2</button>
				<button style="width: 50px;" @click="column = 3">3</button>
				<button style="width: 50px;" @click="column = 4">4</button>
				<button style="width: 50px;" @click="column = 5">5</button>
			</view>
		</view>
		<view style="margin: 20px 0 ">
			<view class="">
				<view class="flex flex-center">
					拖动排列方式：
					<button style="margin: 0;" size="mini" @click="swapMode = !swapMode">
						切换模式
					</button>
				</view>
				{{swapMode?'常规排列，会影响其他下标位置':'互换位置，不会影响其他元素下标位置'}}
			</view>
		</view>
		<leo-drag :swapMode="swapMode" :column="column" ref="leoDrag" @getList="getDropList" v-model:list="dragAndDrop">
			<template #content={data}>
				<view class="drop flex flex-1" :style="[{'transform':data.index === data.activeIndex?'scale(1.05)':'scale(1)',}]">
					<view class="flex flex-1 flex-center-center" style="background-color: aqua;">
						<view class="ellipsis flex-1" style="text-align: center;">
							<input @input="changeInput($event,data.index)" :value="data.name" type="text" />
						</view>
						<uni-icons class="flex-none" @touchstart="changeDisabled(data.index)" style="margin-left: auto;" type="bars" size="30"></uni-icons>
					</view>
				</view>
			</template>
		</leo-drag>
		<view class="flex flex-center">
			<button style="margin: 0;" size="mini" @click="addList">
				动态添加1 个
			</button>
			<input style="border:1px solid #000;border-radius: 5px; margin-left: 10px;" v-model="addValue" type="text" />
		</view>
		<view class="flex flex-center">
			<button style="margin: 0;" size="mini" @click="delList">
				删除第{{delValue}} 个
			</button>
			<input style="border:1px solid #000;border-radius: 5px; margin-left: 10px;" v-model="delValue" type="text" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dragAndDrop:[
					{name:"1"},
					{name:"2"},
					{name:"3"},
					{name:"4"},
					{name:"5"},
					{name:"6"},
					{name:"7"},
				],
				column:1,
				swapMode:false,
				addValue:"动态添加1个",
				delValue:0,
				timer:null
			}
		},
		onLoad() {

		},
		watch:{
			column(n){
				if(!n) return;
				 // 初始化 dom
				this.$refs.leoDrag.initList(this.dragAndDrop,true);
			}
		},
		methods: {
			changeInput(e,i){
				this.dragAndDrop[i].name = e.detail.value;
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					this.$refs.leoDrag.initList(this.dragAndDrop,true);
				},800)
			},
			addList(){
				this.dragAndDrop.push({
					name: this.addValue
				})
				this.$refs.leoDrag.initList(this.dragAndDrop,true);
			},
			delList(){
				let index = this.delValue>this.dragAndDrop.length-1?this.dragAndDrop.length-1:this.delValue;
				this.dragAndDrop.splice(index,1)
				this.$refs.leoDrag.initList(this.dragAndDrop,true);
			},
			getDropList(e){
				console.log("vue3自动修改的旧数据："+JSON.stringify(this.dragAndDrop))
				console.log("插件触发getList的数据："+JSON.stringify(e))
			},
			changeDisabled(i){
				this.$refs.leoDrag.handleLongpress(i);
			}
		}
	}
</script>

<style>
	.flex{
		display: flex;
	}
	.flex-1{
		flex: 1;
	}
	.flex-center-center{
		justify-content: center;
		align-items: center;
	}
	.flex-center{
		align-items: center;
	}
	.flex-none{
		flex: none;
	}
	.drop{
		padding: 10rpx;
	}
</style>
